{$layout}

<div class="ui menu text basic blue small">
	<a href="/settings/postgres" class="item">连接设置</a>
	<a href="/settings/postgres/data" class="item active">数据清理</a>
</div>
<div class="ui divider"></div>

<div class="ui menu text basic blue tiny">
	<a href="/settings/postgres/data" class="item active">手动清理</a>
	<a href="/settings/postgres/clean" class="item">自动清理设置</a>
</div>
<div class="ui divider"></div>

<h3>手动清理<span :class="{disabled:countCalculatedTables!=tables.length}"><var v-if="countCalculatedTables!=tables.length">正在读取</var> {{formatedTotalSize}} {{countCalculatedTables}}/{{tables.length}}</span></h3>

<div>
	<p class="comment">以下是TeaWeb在PostgreSQL数据库中使用的数据表。通常情况下，删除数据库中的数据并不影响TeaWeb正常运行。</p>
	<p v-if="!isLoaded">正在读取数据，请耐心等待...</p>
	<p class="ui message info" v-if="isLoaded && tables.length == 0">当前PostgreSQL数据库中还没有TeaWeb相关数据，不需要做任何清理。</p>

	<table class="ui table selectable" v-if="isLoaded && tables.length > 0">
		<thead>
			<tr>
				<th>表名</th>
				<th>类型</th>
				<th class="two wide">记录数</th>
				<th class="two wide">占用空间</th>
				<th>是否可删除</th>
				<th>操作</th>
			</tr>
		</thead>
		<tr v-for="table in tables">
			<td>{{table.name}}
				<br/>
				<span class="grey" style="font-size:0.8em" v-if="table.subName != null && table.subName.length > 0">{{table.subName}}</span>
			</td>
			<td>
				<span v-if="table.warning" class="red">{{table.type}}</span>
				<span v-if="!table.warning">{{table.type}}</span>
			</td>
			<td>
				<span v-if="table.count != '-'">{{table.count}}</span>
				<span v-if="table.count == '-'" class="disabled">正在读取</span>
			</td>
			<td>
				<span v-if="table.formattedSize != null">{{table.formattedSize}}</span>
				<span v-if="table.formattedSize == null" class="disabled">正在读取</span>
			</td>
			<td>
				<span v-if="table.canDelete" class="green">YES</span>
				<span v-if="!table.canDelete" class="disabled">NO</span>
			</td>
			<td>
				<a href="" v-if="table.canDelete" @click.prevent="deleteTable(table.name)">删除</a>
			</td>
		</tr>
	</table>
</div>